<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片</title>
</head>
<style>
    .box {
        width: 1000px;
        height: 1000px;
        background-color: #bfa;
        /*设置背景图片*/
        background-image: url(img/timg.jpg);
        /*
          background-repeat： 设置如何平铺对象的 background-image 属性。
          可选值:
            - repeat 水平和垂直 都重复，默认值
            - repeat-x 水平重复
            - repeat-y 垂直重复
            - no-repeat 不重复
        */
        background-repeat: no-repeat;
        /*
            background-position：设置背景图像的起始位置
            注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".
            可选值:
                - left center right top bottom 两两排列组合，将图片划分为3*3 的方格
                - 也可以使用 百分比，一个是水平位置，一个是垂直位置
        
        */
        background-position: center top;

        /*
            background-attachment 设置背景图片是否随着页面移动而移动
            可选值:
                - scroll：随页面滚动而滚动，默认值
                - fixed 背景图片不会随着页面的滚动而滚动。重点
                - local 背景图片会随着元素内容的滚动而滚动。
        */
        background-attachment: local;
        /*
         背景图片样式简写:
          背景缩写属性可以在一个声明中设置所有的背景属性。
          可以设置的属性分别是：background-color, background-position, background-size, background-repeat,
                              background-origin, background-clip, background-attachment,和background-image.
          注意，如果没写，则使用默认值，建议写在背景样式前面，不然默认值会覆盖之前设置的样式
        */
    }
</style>

<body>
    <div class="box"></div>
</body>

</html>